<template>
  <div class="data-statistics">
    <ContentForm name="检测缺陷重复分析">
      <div slot="searchform" class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.deptCode" clearable placeholder="选择供电段" @change="line">
              <el-option
                v-for="item in formz.selectSection"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.selectLin" clearable placeholder="选择线路" @change="listByLineId">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.directionId" clearable placeholder="行别" @change="getpillarList">
              <el-option
                v-for="item in formz.selectXingb"
                :key="item.value"
                :label="item.label"
                :value="item.id" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.siteId" placeholder="选择区间站场" clearable @change="getpillarList">
              <el-option
                v-for="item in formz.selectQujian"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <select-table
              v-model="valuek.pillarNum"
              value-key="pillarId"
              label-key="pillarNum"
              table-value-key="id"
              placeholder="请选择支柱"
              :filter-form="selectTableModel.filterForm"
              :filter-data="selectTableModel.filterData"
              :default-data="pillars"
              :columns="selectTableModel.columns"
              :total="selectTableModel.total"
              :filter-fn="selectTableModel.filterFn"
              @current-change="changeBimModel"
              @clear="valuek.pillarNum=''" />
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="valuek.selectShij"
              class="input-long"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd" />
          </p>
          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getFromvalue">查询</el-button>
          </p>
        </form>
      </div>
      <div slot="valueform" style="padding-top:4px;height: calc(100%);">
        <div style="height: calc(100% - 37px);">
          <el-table
            v-loading="loading"
            :data="tableDataDefect"
            height="100%"
            border
            stripe>
            <el-table-column
              label="序号"
              type="index"
              width="80"
              align="center" />
            <el-table-column
              prop="lineName"
              label="线路"
              sortable="custom"
              show-overflow-tooltip
              width="120"
              align="center" />
            <el-table-column
              prop="directionName"
              label="行别"
              align="center"
              show-overflow-tooltip
              sortable="custom"
              width="100" />
            <el-table-column
              prop="siteName"
              label="区站"
              show-overflow-tooltip
              sortable="custom"
              align="center" />
            <el-table-column
              prop="tunnelName"
              label="隧道"
              width="120"
              show-overflow-tooltip
              sortable="custom"
              align="center" />
            <el-table-column
              prop="pillarNum"
              label="支柱号"
              width="140"
              show-overflow-tooltip
              sortable="custom"
              align="center" />
            <el-table-column
              label="公里标"
              show-overflow-tooltip
              align="center"
              min-width="140">
              <template slot-scope="scope">
                {{ formatRoad(scope.row.roadMark) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="count"
              label="缺陷数量"
              width="100"
              show-overflow-tooltip
              sortable="custom"
              align="center" />
            <el-table-column
              width="80"
              align="center"
              fixed="right">
              <template slot="header">
                操作
              </template>
              <template slot-scope="scope">
                <a class="el-icon-view" @click="showDetail(tableDataDefect[scope.$index])" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="queryParams.page"
            :size.sync="queryParams.size"
            @pagination="getFromvalue" />
        </div>
      </div>
    </ContentForm>
    <el-dialog
      width="100%"
      class="innerdialog"
      top="0"
      bottom="0"
      :visible.sync="innerVisible"
      append-to-body>
      <dialog-inner ref="inner" />
    </el-dialog>
  </div>
</template>

<script>
import DialogInner from './components/dialog-inner'
import { parseTime } from '@/utils'
import { listByLineId } from '@/api/cms/detect-data/information'
import { findDefectRepeatedAnalysis } from '@/api/cms/data-statistics'
import { line, listDirection, getListSection, pillarList } from '@/api/cms/detect-data/basic'
export default {
  name: 'DefectRepeat',
  components: {
    DialogInner
  },
  data() {
    return {
      innerVisible: false,
      loading: false,
      tableDataDefect: [],
      deptId: '',
      tableValue: '',
      imageurl: '',
      total: 0,
      queryParams: {
        page: 1,
        size: 20
      },
      valuek: {
        deptCode: '', // 所选得供电段
        selectLin: '', // 选择线路
        directionId: '', // 行别
        siteId: '', // 区间
        pillarNum: '',
        selectShij: [],
        pillarCode: ''
      },
      formz: {
        selectQujian: [],
        selectSection: [], // 所选得供电段
        selectLin: [],
        selectXingb: [] // 行别
      },
      pillars: [],
      selectTableModel: {
        filterForm: {
          page: 1,
          size: 10,
          // directionIds: '',
          startPillar: '',
          endPillar: ''
          // isDirection: true
        },
        filterData: {
          startPillar: {
            key: 'startPillar',
            type: 'input',
            placeholder: '开始支柱号'
          },
          endPillar: {
            key: 'endPillar',
            type: 'input',
            placeholder: '结束支柱号'
          }
        },
        columns: [
          { label: '支柱号', property: 'pillarNum' },
          { label: '行别', property: 'directionName', formatter: row => row.directionAttr ? row.directionAttr.directionName : '' },
          { label: '区间站场', property: 'siteAttr', formatter: row => row.siteAttr ? row.siteAttr.siteName : '' },
          { label: '隧道', property: 'tunnelName', formatter: row => row.tunnelAttr ? row.tunnelAttr.tunnelName : '' },
          { label: '公里标', property: 'roadMark', formatter: row => this.formatRoad(row.roadMark) }
        ],
        total: 0,
        filterFn: pillarList
      },
      bimModelAttr: {}
    }
  },
  watch: {
  },
  mounted() {
    var date = new Date()
    this.valuek.selectShij = [date.getFullYear() + '-01-01', parseTime(date, '{y}-{m}-{d}')]
    getListSection().then(res => {
      this.formz.selectSection = res.data
    })
    this.line()
    this.listDirection()
    this.getpillarList()
    this.getFromvalue()
  },
  methods: {
    showDetail(val) {
      this.innerVisible = true
      val.startTime = this.valuek.selectShij ? this.valuek.selectShij[0] || '' : ''
      val.endTime = this.valuek.selectShij ? this.valuek.selectShij[1] || '' : ''
      this.$nextTick(_ => {
        this.$refs.inner.getFromvalue(val)
      })
    },
    line(val) {
      const obj = {
        deptId: ''
      }
      if (val) {
        const value = this.formz.selectSection.find((ele) => {
          return ele.deptCode === val
        })
        obj.deptId = value.id
        this.deptId = value.id
      }
      this.valuek.selectLin = ''
      this.listByLineId()
      line(obj).then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineId + '-' + item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    listDirection() {
      listDirection().then(response => {
        // console.log('行别下拉框', response)
        const directions = []
        if (response.data) {
          response.data.forEach(item => {
            const direction = {}
            direction.value = item.directionCode
            direction.label = item.directionName
            direction.id = item.id
            directions.push(direction)
          })
        }
        this.formz.selectXingb = directions
      })
    },
    listByLineId() {
      this.getpillarList()
      const deptId = this.deptId
      const line = this.valuek.selectLin
      this.valuek.siteId = ''
      this.formz.selectQujian = []
      if (line) {
        const lineCode = line.split('-')[0]
        listByLineId({ deptId: deptId, lineId: lineCode }).then(response => {
          // console.log('区间下拉框', response)
          const sites = []
          if (response.data) {
            response.data.forEach(item => {
              const site = {}
              site.value = item.siteId + '-' + item.lineSiteCode
              site.label = item.siteName
              site.siteId = item.siteId
              sites.push(site)
            })
          }
          this.formz.selectQujian = sites
        })
      }
    },
    // 获取支柱
    getpillarList() {
      this.valuek.pillarNum = ''
      this.pillars = []
      if (this.valuek.selectLin !== '' && this.valuek.siteId !== '') {
        const lineId = this.valuek.selectLin.split('-')[0]
        const selectQujian = this.valuek.siteId.split('-')[0]
        this.selectTableModel.filterForm = Object.assign({}, this.selectTableModel.filterForm, {
          page: 1,
          lineId: lineId,
          directionIds: this.valuek.directionId,
          siteIds: selectQujian,
          startPillar: '',
          endPillar: ''
        })
        pillarList(this.selectTableModel.filterForm)
          .then(response => {
            this.pillars = response.data.records
            this.selectTableModel.total = response.data.total
          })
          .catch(_ => {})
      }
    },
    // 选择支柱号
    changePillar(data) {
      this.dialog.form.pillarList = data.map(item => ({
        pillarId: item.id,
        pillarNum: item.pillarNum,
        pillarCode: item.pillarCode,
        roadMark: item.roadMark,
        anchorList: item.anchorList || []
      }))
      const allAnchorList = this.dialog.form.pillarList.filter(item => item.anchorList.length).map(item => item.anchorList).flat()
      this.dialog.form.anchorList = allAnchorList.filter((item, index, arr) => {
        return arr.findIndex(child => item.anchorId === child.anchorId) === index
      })
      // this.getDeviceCode(data[0] && data[0].id)
    },
    changeBimModel(data) {
      this.valuek.pillarNum = data.pillarNum
      this.valuek.pillarCode = data.pillarCode
      // this.getFromvalue()
    },
    getFromvalue() {
      var obj = Object.assign({
        lineId: this.valuek.selectLin ? this.valuek.selectLin.split('-')[0] || '' : '',
        deptCode: this.valuek.deptCode ? this.valuek.deptCode.split('-')[0] || '' : '',
        pillarNum: this.valuek.pillarNum,
        pillarCode: this.valuek.pillarCode,
        directionId: this.valuek.directionId,
        lineSiteCode: this.valuek.siteId ? this.valuek.siteId.split('-')[1] || '' : '',
        startTime: this.valuek.selectShij ? this.valuek.selectShij[0] || '' : '',
        endTime: this.valuek.selectShij ? this.valuek.selectShij[1] || '' : ''
      }, this.queryParams)
      this.loading = true
      findDefectRepeatedAnalysis(obj).then(res => {
        this.loading = false
        this.tableDataDefect = res.data.records
        this.total = res.data.total
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.innerdialog{
  ::v-deep .el-dialog{
    height: 100%;
    .el-dialog__header{
      padding: 0 16px;
      height: 0;
      background:#006fc5;
      .el-dialog__title{
        color: white;
        font-size: 16px;
      }
      .el-dialog__headerbtn{
        top: 22px;
        .el-icon-close{
          font-size: 20px;
          color: white;
        }
      }
    }
    .el-dialog__body{
      padding: 10px;
      height: calc(100%);
    }
  }
}
</style>
